
// 计算宽度
@mixin calcWidth($width, $boxWidth) {
  $calcWidth: calc($boxWidth / $width) * 100%;

  width: $calcWidth;
}

// 计算列表宽度
@mixin calcListWidth($width, $boxWidth, $number) {
  $calcWidth: calc($boxWidth / $width) * 100%;
  $marginWidth: calc((100% - ($calcWidth * ($number))) / ($number - 1));

  width: $calcWidth;
  margin-right: $marginWidth;
  margin-bottom: $marginWidth;

  &:nth-child(#{$number}n+#{$number}){
    margin-right: 0px;
  }
}

@mixin bg() {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: -1;
  img{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;object-fit: cover;}
}

@mixin image() {overflow: hidden;
  img{width: 100%;height: auto;transition: all .4s ease;}
}

@mixin imageHeight($height) {overflow: hidden;
  img{width: 100%;height: $height;object-fit: cover; transition: all .4s ease;}
}

@mixin rows($line) {
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
$logo: #E82A26;

@mixin bg(){position: absolute;top: 0px;left: 0px; width: 100%;height: 100%;z-index: -1;
  img{position: absolute;top: 0px;left: 0px; width: 100%;height: 100%;object-fit: cover;}
}

@mixin scrollbar {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #d5d5d5;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background-color: #d5d5d5;
  }
  
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    background-color: var(--vi-color); 
  }
}